import Vue from "vue";
import vueRouter from 'vue-router'
// import Home from '../pages/Home'
// import List from '../pages/List'
// import Music from '../pages/Home/Music'
// import Play from '../pages/Home/Play'
// import Work from '../pages/Home/Work'

// 返回一个import函数,vue中允许使用函数当作组件,当加载到此组件时,会直接调用函数,然后执行import()得到一个promise对象,根据promise的返回值的
// 成功与否,决定加载不加载其携带的 moudule 组件对象
const Home = () => import('../pages/Home')
const List = () => import('../pages/List')
const Music = () => import('../pages/Home/Music')
const Play = () => import('../pages/Home/Play')
const Work = () => import('../pages/Home/Work')
// 由于webpack的打包机制,和import的使用机制(必须在最外层使用)
// 打包时会将所有的js全部汇聚成一个js,当首页加载时,就会加载整个js,及所有的页面都会被加载,这是并不需要的,所以根据
// es6中的import()函数,以及vue的注册兼容,实现一种使用函数代替直接引入组件的方式称为懒加载
Vue.use(vueRouter)
export default new vueRouter({
    // 路由模式的切换,在路由配置中将mode改为需要配置的模式
    mode: 'history',
    routes: [
        {
            // 可以通过给'/'添加重定向的方式给页面添加首页
            path: '/',
            redirect: '/home'
        },
        {
            path: '/home',
            component: Home,
            //路由的重定向,在vue中提供了一种类似Navigation to='' 的一种重定向方式
            // redirect ='转向的地址'
            redirect: "/home/music",
            //也可以通过给二级路由添加redirect 的方式添加打开一级路由后直接显示的二级路由
            children: [
                {
                    path: '/home/music',
                    component: Music,
                },
                {
                    path: '/home/play',
                    component: Play,
                    name: 'play'
                },
                {
                    path: '/home/work',
                    name: 'work',
                    component: Work,
                },
            ]
        },
        {
            path: '/list',
            component: List,
        },
    ]
})